package showcase

import (
	"github.com/templui/templui/internal/components/checkbox"
	"github.com/templui/templui/internal/components/form"
)

templ CheckboxForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.ItemFlex() {
				@checkbox.Checkbox(
					checkbox.Props{
						Name:    "interests",
						Value:   "design",
						ID:      "c1",
						Checked: true,
					},
				)
				@form.Label(form.LabelProps{
					For: "c1",
				}) {
					Dessign and UX
				}
			}
			@form.ItemFlex() {
				@checkbox.Checkbox(checkbox.Props{
					Name:     "interests",
					Value:    "development",
					ID:       "c2",
					Disabled: true,
				})
				@form.Label(form.LabelProps{
					For: "c2",
				}) {
					Development (Coming Soon)
				}
			}
			@form.ItemFlex() {
				@checkbox.Checkbox(checkbox.Props{
					Name:  "interests",
					Value: "marketing",
					ID:    "c3",
				})
				@form.Label(form.LabelProps{
					For: "c3",
				}) {
					Business and Marketing
				}
			}
			@form.Description() {
				Choose all areas that interest you.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please select at least one interest.
			}
		}
	</div>
}
